<template>
  <div class="unity-body-div damSeepage body-bg">
    <close @click.native="toClose" v-show="!historyDataDialog"></close>
    <div class="t_return" @click="toReturn" v-show="historyDataDialog">
      <img src="http://mahe.jnaw.top/mh/mhsk_photo/revert1.png" alt="" />
    </div>
    <big-center-title :title="pageTitle"></big-center-title>

    <!-- 原始图表 -->
    <div
      class="unity-body-center-body-btn"
      style="height: calc(100% - 90px);"
      v-show="!historyDataDialog"
    >
      <div class="unity-body-center-left-btn">
        <div style="width:100%;height:460px;z-index:9999999" ref="main1"></div>
      </div>
    </div>
    <!-- 二级图表 -->
    <div
      class="unity-body-center-body-btn"
      style="height: calc(100% - 90px);"
      v-show="historyDataDialog"
    >
      <div class="unity-body-center-left-btn">
        <div
          class="unity-body-center"
          style="position: relative;"
          v-loading="!islook"
          element-loading-background="rgba(0, 0, 0, 0)"
        >
          <div class="change_date">
            <div
              :class="index == datecheck ? 'choosedate' : 'change_date_item'"
              v-bind:key="index"
              v-for="(item, index) in alldate"
              @click="changeDate(index)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="chart" v-if="islook">
            <div
              style="width:100%;height:460px;z-index:9999999"
              ref="main"
              v-if="isShowGZ == false"
            ></div>
            <div v-else class="guzhang" style="color: red;">
              暂无数据
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <el-dialog
      :title="typeObj_Title"
      :visible.sync="historyDataDialog"
      width="80%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div
        class="unity-body-center"
        style="position: relative;"
        v-loading="!islook"
        element-loading-background="rgba(0, 0, 0, 0)"
      >
        <div class="change_date">
          <div
            :class="index == datecheck ? 'choosedate' : 'change_date_item'"
            v-bind:key="index"
            v-for="(item, index) in alldate"
            @click="changeDate(index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="chart" v-if="islook">
          <div
            style="width:100%;height:320px;z-index:9999999"
            ref="main"
            v-if="isShowGZ == false"
          ></div>
          <div v-else class="guzhang" style="color: red;">
            暂无数据
          </div>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import StringUtils from "../../utils/string";
import UnityIm from "../../utils/unityIm";
import bigCenterTitle from "@/components/unityweb/big-center-title";
import close from "@/components/unityweb/close";
import Model3dShow from "../components/model-3d-show.vue";

export default {
  name: "damSeepage",
  components: {
    bigCenterTitle,
    close,
    Model3dShow: Model3dShow
  },
  data() {
    return {
      handleData: {},
      historyDataDialog: false, //历史数据弹窗
      typeObj_Title: "历史数据",
      stationID: null, //测点id
      pageTitle: "大坝渗流",
      paramsTitle: "", //记录之前的标题
      typeObj: {},

      equipmentDetial: {},
      monitorList: [],

      monitorTypeObj: {}, //res.data
      activeName: "",
      watchTypeInd: 0,
      watchTypeObj: {
        key: "",
        id: -1,
        name: ""
      },
      watchTypeList: [],
      t_index: 0, //外层Index

      photoArr: [],
      //筛选条件
      alldate: [
        {
          type: "week",
          name: "周"
        },
        {
          type: "month",
          name: "月"
        },
        {
          type: "year",
          name: "年"
        }
      ],
      // alldate: [],
      //对应下标
      datecheck: 0,
      //保存Id
      params: "",
      islook: true,
      isShowGZ: false //是否故障
    };
  },
  created() {
    var _this = this;
    // // 默认图表
    // this.$nextTick(() => {
    //   this.drawShapes();
    // });
    // _this.u_getToken({
    //   id: 91,
    //   name: "XX大坝渗流"
    // });
  },
  mounted() {
    window.addEventListener("message", event => {
      //event.data获取传过来的数据
      let _obj = event.data;
      let method_name = _obj.methodName || "";
      let paramsStr = _obj.parameterData || "";
      let params = StringUtils.toJson(paramsStr);
      if (_obj.managerType == "open") {
        this.openHandler(method_name, params);
      } else if (_obj.managerType == "close") {
      } else if (_obj.managerType == "cancelSelected") {
      }
    });
    if (window.vuplex) {
      this.addMessageListener21();
    } else {
      // 初始化侦听器
      window.addEventListener("vuplexready", this.addMessageListener21);
    }
  },
  methods: {
    toReturn() {
      // console.log("toReturn");
      this.historyDataDialog = false;
      this.datecheck = 0;
      this.typeObj = {};
      this.pageTitle = this.paramsTitle;
    },
    handleClose() {
      this.historyDataDialog = false;
      this.datecheck = 0;
      this.typeObj = {};
    },

    // TODO 告诉unity关闭网页
    toClose() {
      UnityIm.closePanelManager("damSeepage");
    },
    addMessageListener21() {
      UnityIm.receiveUnityOpenMessage((method_name, params) => {
        this.openHandler(method_name, params);
      });
    },
    openHandler(method_name, params) {
      switch (method_name) {
        case "damSeepage":
          this.u_getToken(params);
          break;
      }
    },

    u_getToken(params) {
      var _this = this;
      console.log("params:", params);
      // 默认图表
      _this.equipment_query(params);
    },
    // 默认图表
    equipment_query(params) {
      var _this = this;
      var datas = {
        id: params.id
      };
      _this.$apis.device_realtime_table(datas).then(res => {
        if (res.result == 0) {
          console.log("res.data:", res.data);
          _this.paramsTitle = params.name;
          _this.pageTitle = _this.paramsTitle;
          // TODO处理数据
          _this.handleData = res.data;

          var v1 = {};
          var v2 = {};
          var v3 = {};
          var v4 = {};
          var v5 = {};
          var v6 = {};
          var v7 = {};
          var v8 = {};
          for (let a = 0; a < _this.handleData.length; a++) {
            const element = _this.handleData[a];
            console.log("element.key_name:", element.key_name.indexOf("T1"));
            if (element.key_name.indexOf("T1") != -1) {
              v1 = {
                id: element.id,
                value: Number(element.value).toFixed(2) + ""
              };
            }
            if (element.key_name.indexOf("T2") != -1) {
              v2 = {
                id: element.id,
                value: Number(element.value).toFixed(2) + ""
              };
            }
            if (element.key_name.indexOf("T3") != -1) {
              v3 = {
                id: element.id,
                value: Number(element.value).toFixed(2) + ""
              };
            }
            if (element.key_name.indexOf("T4") != -1) {
              v4 = {
                id: element.id,
                value: Number(element.value).toFixed(2) + ""
              };
            }
            if (element.key_name.indexOf("J1") != -1) {
              v5 = {
                id: element.id,
                value: Number(element.value).toFixed(2) + ""
              };
            }
            if (element.key_name.indexOf("J2") != -1) {
              v6 = {
                id: element.id,
                value: Number(element.value).toFixed(2) + ""
              };
            }
            if (element.key_name.indexOf("J3") != -1) {
              v7 = {
                id: element.id,
                value: Number(element.value).toFixed(2) + ""
              };
            }
            if (element.key_name.indexOf("J4") != -1) {
              v8 = {
                id: element.id,
                value: Number(element.value).toFixed(2) + ""
              };
            }
          }

          // 默认图表
          _this.$nextTick(() => {
            _this.drawShapes(_this.handleData, v1, v2, v3, v4, v5, v6, v7, v8);
          });
        }
      });
    },
    // 弹窗处理数据
    getDatas() {
      var _this = this;
      var datas = {
        id: _this.stationID,
        type: _this.alldate[_this.datecheck].type
      };
      _this.$apis.device_site_table(datas).then(res => {
        if (res.result == 0) {
          _this.typeObj = res.data;
          // TODO弹窗数据
          _this.historyDataDialog = true;
          // _this.typeObj_Title = _this.typeObj.key_name + " - 历史数据";
          _this.pageTitle = _this.typeObj.key_name + " - 历史数据";

          _this.$nextTick(() => {
            _this.chartDetial(_this.typeObj);
          });
        } else {
          _this.historyDataDialog = true;
          _this.isShowGZ = true;
        }
      });
    },
    // 弹窗图表渲染
    chartDetial(item, unit) {
      // console.log("===========", item);
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(this.$refs.main);
      // 清除已有的数据
      myChart.clear();
      // 指定图表的配置项和数据
      let option = {
        //调整此处大小即可控制空白
        // grid: { x: 60, y: 45, x2: 40, y2: 35 },
        grid: { x: 60, y: 70, x2: 40, y2: 45 },
        xAxis: {
          type: "category",
          // name: this.alldate[this.datecheck].type == "day" ? "时" : "",
          boundaryGap: false,
          data: item.x,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              // color: "rgba(255, 255, 255, 0.6)"
              color: "#fff"
            }
          },
          axisLabel: {
            // interval: 0, // 显示所有标签
            // rotate: 40
            //x轴间隔显示
            interval: "auto"
          }
        },
        dataZoom: [
          {
            type: "slider", //滑动条型数据区域缩放组件
            realtime: true, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
            start: 0, //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            //              end: 100,  // 数据窗口范围的结束百分比。范围是：0 ~ 100
            height: 100,
            endValue: 66, //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
            fillerColor: "rgba(255, 255, 255, 0)", // 滚动条颜色
            borderColor: "rgba(255, 255, 255, 0)",
            handleSize: 0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top: "96%", //组件离容器上侧的距离
            zoomLock: true // 是否只平移不缩放
            // moveOnMouseMove:true, //开启鼠标移动窗口平移
            // zoomOnMouseWheel :true, //开启鼠标滚轮缩放
          },
          {
            type: "inside", //内置型数据区域缩放组件
            // start: 0,
            //              end: 100,
            endValue: 24, // 最多12个
            zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
            moveOnMouseWheel: false, // 开启鼠标滚轮窗口平移
            moveOnMouseMove: false // 开启鼠标移动窗口平移
          }
        ],
        yAxis: {
          type: "value",
          // name: "m",
          name: item.unit,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#BFBFBF"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#ccc"],
              width: 1,
              type: "dashed"
            }
          },
          axisLabel: {
            // formatter: "{value}",
            formatter: function(param) {
              // console.log(param);
              var value = param;
              // return value + item.unit;
              return value;
            }
          }
          // axisLabel:{
          //   rotate:45,
          // },
        },
        tooltip: {
          // trigger: "item"
          trigger: "axis",
          formatter: function(param) {
            // console.log(param[0]);
            var value = param[0];
            return (
              '<div style="font-size: 16px;"> ' +
              value.name +
              "：" +
              value.value +
              "</div>"
            );
          }
        },

        label: {
          show: false,
          position: "bottom",
          textStyle: {
            fontSize: 20
          }
        },
        textStyle: {
          color: "#fff"
        },

        series: [
          {
            type: "line",
            smooth: true, //是否平滑曲线显示
            // barGap: 0,
            color: ["rgba(91,143,249,0.7)"],

            symbolSize: 0,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(91,143,249,0.7)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(91,143,249,0)" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },

            // yAxisIndex: 0,
            // data: _this.orderList,
            data: item.y
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 默认图表渲染
    drawShapes(item, v1, v2, v3, v4, v5, v6, v7, v8) {
      var _this = this;
      // console.log("默认图表渲染item:", item);
      // console.log("v1:", v1);
      let myChart = this.$echarts.init(this.$refs.main1);

      //
      let data1 = [
        {
          id: v1.id || -1,
          value: v1.value ? (Number(v1.value) + 93).toFixed(2) : 0,
          xAxis: 5,
          yAxis: 111.24
        },
        {
          id: v2.id || -1,
          value: v2.value ? (Number(v2.value) + 93).toFixed(2) : 0,
          xAxis: 7,
          yAxis: 111.24
        },
        {
          id: v3.id || -1,
          value: v3.value ? (Number(v3.value) + 93).toFixed(2) : 0,
          xAxis: 8,
          yAxis: 106.36
        },
        {
          id: v4.id || -1,
          value: v4.value ? (Number(v4.value) + 93).toFixed(2) : 0,
          xAxis: 9,
          yAxis: 100.52
        }
        // { id: 102, value: 117, xAxis: 12, yAxis: 104.7 },
        // { id: 101, value: 112, xAxis: 14, yAxis: 103 },
        // { id: 102, value: 106, xAxis: 16, yAxis: 97.64 }
      ];
      let qp1 = [];
      if (JSON.stringify(v1) != "{}") {
        qp1.push(data1[0]);
      }
      if (JSON.stringify(v2) != "{}") {
        qp1.push(data1[1]);
      }
      if (JSON.stringify(v3) != "{}") {
        qp1.push(data1[2]);
      }
      if (JSON.stringify(v4) != "{}") {
        qp1.push(data1[3]);
      }
      let data2 = [
        // { id: 201, value: 103, xAxis: 8, yAxis: 104.7 },
        // { id: 202, value: 117, xAxis: 12, yAxis: 104.7 },
        // { id: 201, value: 112, xAxis: 14, yAxis: 103 },
        // { id: 202, value: 106, xAxis: 16, yAxis: 97.64 }
        {
          id: v5.id || -1,
          value: v5.value ? (Number(v5.value) + 93).toFixed(2) : 0,
          xAxis: 5,
          yAxis: 111.24
        },
        {
          id: v6.id || -1,
          value: v6.value ? (Number(v6.value) + 93).toFixed(2) : 0,
          xAxis: 7,
          yAxis: 111.24
        },
        {
          id: v7.id || -1,
          value: v7.value ? (Number(v7.value) + 93).toFixed(2) : 0,
          xAxis: 8,
          yAxis: 106.36
        },
        {
          id: v8.id || -1,
          value: v8.value ? (Number(v8.value) + 93).toFixed(2) : 0,
          xAxis: 9,
          yAxis: 100.52
        }
      ];
      let qp2 = [];
      if (JSON.stringify(v5) != "{}") {
        qp2.push(data2[0]);
      }
      if (JSON.stringify(v6) != "{}") {
        qp2.push(data2[1]);
      }
      if (JSON.stringify(v7) != "{}") {
        qp2.push(data2[2]);
      }
      if (JSON.stringify(v8) != "{}") {
        qp2.push(data2[3]);
      }

      let option = {
        grid: { x: 60, y: 70, x2: 40, y2: 45 },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            interval: "auto"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid"
            }
          },
          data: [
            "0",
            "9",
            "18",
            "27",
            "36",
            "45",
            "48.5",
            "52",
            "67",
            "86",
            "105",
            "124"
          ]
        },
        yAxis: {
          type: "value",
          name: "高程(m)",
          min: 80,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid"
            }
          }
        },
        series: [
          // 棕色坝体 写死93
          {
            data: [93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93, 93],
            type: "line",
            smooth: true,
            symbol: "none",
            // color:'#6c2813',
            color: "rgba(108, 39, 21,1)",
            zlevel: 10,
            z: 4,
            areaStyle: {}
          },
          // 浅绿色 浸润线
          {
            data: [
              102,
              102,
              103.48,
              103.48,
              103.48,
              103.48,
              96,
              96,
              94,
              93.5,
              93.5,
              93
            ],
            type: "line",
            // smooth: true,
            symbol: "none",
            color: "#009087",
            zlevel: 7,
            z: 2,
            areaStyle: {}
          },
          // 蓝色水面 死水位
          {
            data: [
              103.48,
              103.48,
              103.48,
              103.48,
              103.48,
              103.48,
              96,
              96,
              94,
              93.5,
              93.5,
              93
            ],
            type: "line",
            // smooth: true,
            symbol: "none",
            markPoint: {
              data: [
                {
                  name: "第一个点",
                  value: parseInt(item[0].level),
                  xAxis: 1,
                  yAxis: item[0].level
                }
              ]
            },
            color: "#025bbb",
            zlevel: 3,
            z: 1,
            areaStyle: {}
          },
          // 绿色大坝 写死大坝点位数据
          {
            data: [
              98.7,
              100.55,
              104.55,
              106.44,
              109.58,
              111.24,
              111.24,
              111.24,
              106.36,
              100.52,
              96.4,
              // 89.8,
              93
            ],
            type: "line",
            // smooth: true,
            symbol: "none",
            color: "#004c30",
            zlevel: 8,
            // z: 3,
            areaStyle: {}
          },
          // 柱子11111111111
          {
            name: "Placeholder",
            type: "bar",
            barGap: 1,
            barMaxWidth: 5,
            zlevel: 15,
            stack: "Total",
            silent: true,
            itemStyle: {
              borderColor: "transparent",
              color: "transparent"
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent"
              }
            },
            data: [0, 0, 0, 0, 0, 93, 0, 93, 93, 93, 0, 0]
          },
          {
            name: "Income",
            type: "bar",
            barGap: 1,
            barMaxWidth: 5,
            zlevel: 15,
            stack: "Total",
            color: "#b29d5a",
            itemStyle: {
              borderColor: "#f4f12a",
              borderWidth: 0
            },
            markPoint: {
              itemStyle: {
                color: "#009076"
              },
              data: qp1
              // data: [
              //   {
              //     id: v1.id || -1,
              //     value: v1.value ? (Number(v1.value) + 93).toFixed(2) : 0,
              //     xAxis: 8,
              //     yAxis: 104.7
              //   },
              //   {
              //     id: v2.id || -1,
              //     value: v2.value ? (Number(v2.value) + 93).toFixed(2) : 0,
              //     xAxis: 12,
              //     yAxis: 104.7
              //   },
              //   {
              //     id: v3.id || -1,
              //     value: v3.value ? (Number(v3.value) + 93).toFixed(2) : 0,
              //     xAxis: 14,
              //     yAxis: 103
              //   },
              //   {
              //     id: v4.id || -1,
              //     value: v4.value ? (Number(v4.value) + 93).toFixed(2) : 0,
              //     xAxis: 16,
              //     yAxis: 97.64
              //   }
              //   // { id: 102, value: 117, xAxis: 12, yAxis: 104.7 },
              //   // { id: 101, value: 112, xAxis: 14, yAxis: 103 },
              //   // { id: 102, value: 106, xAxis: 16, yAxis: 97.64 }
              // ]
            },
            data: [
              0,
              0,
              0,
              0,
              0,
              v1.value ? 18.24 : 0,
              0,
              v2.value ? 18.24 : 0,
              v3.value ? 13.36 : 0,
              v4.value ? 7.52 : 0,
              0,
              0
            ]
          },
          /*柱子2222222222*/
          {
            name: "Placeholder",
            type: "bar",
            barGap: 1,
            barMaxWidth: 5,
            zlevel: 15,
            stack: "Total2",
            silent: true,
            itemStyle: {
              borderColor: "transparent",
              color: "transparent"
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent"
              }
            },
            data: [0, 0, 0, 0, 0, 93, 0, 93, 93, 93, 0, 0]
          },
          {
            name: "Income",
            type: "bar",
            barGap: 1,
            barMaxWidth: 5,
            zlevel: 15,
            stack: "Total2",
            color: "#08a29f",
            itemStyle: {
              borderColor: "#b389e8",
              borderWidth: 0
            },
            markPoint: {
              itemStyle: {
                color: "#122483"
              },
              data: qp2
              // data: [
              //   // { id: 201, value: 103, xAxis: 8, yAxis: 104.7 },
              //   // { id: 202, value: 117, xAxis: 12, yAxis: 104.7 },
              //   // { id: 201, value: 112, xAxis: 14, yAxis: 103 },
              //   // { id: 202, value: 106, xAxis: 16, yAxis: 97.64 }
              //   {
              //     id: v5.id || -1,
              //     value: v5.value ? (Number(v5.value) + 93).toFixed(2) : 0,
              //     xAxis: 8,
              //     yAxis: 104.7
              //   },
              //   {
              //     id: v6.id || -1,
              //     value: v6.value ? (Number(v6.value) + 93).toFixed(2) : 0,
              //     xAxis: 12,
              //     yAxis: 104.7
              //   },
              //   {
              //     id: v7.id || -1,
              //     value: v7.value ? (Number(v7.value) + 93).toFixed(2) : 0,
              //     xAxis: 14,
              //     yAxis: 103
              //   },
              //   {
              //     id: v8.id || -1,
              //     value: v8.value ? (Number(v8.value) + 93).toFixed(2) : 0,
              //     xAxis: 16,
              //     yAxis: 97.64
              //   }
              // ]
            },
            data: [
              0,
              0,
              0,
              0,
              0,
              v5.value ? 18.24 : 0,
              0,
              v6.value ? 18.24 : 0,
              v7.value ? 13.36 : 0,
              v8.value ? 7.52 : 0,
              0,
              0
            ]
            // data: [
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   0,
            //   13,
            //   0,
            //   0,
            //   0,
            //   11.7,
            //   0,
            //   10,
            //   0,
            //   4.64,
            //   0,
            //   0,
            //   0,
            //   0
            // ]
          }
        ]
      };

      // _this.alldata = option.series;
      // console.log("===", option.series);

      // // option.series[4].data =v1;
      // option.series[5].data = v1;

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      //用于做每个点的监听，只用点击点才能够获取想要的监听效果；
      myChart.off("click");
      myChart.on("click", function(params) {
        // console.log("params:", params);
        if (!params.data.id) {
          return;
        }
        if (params.data.id == -1) {
          return;
        }
        // let data = {
        //   id: params.data.id,
        //   value: params.data.value
        // };
        _this.stationID = params.data.id;
        // _this.stationID = 101;
        _this.getDatas();
      });
    },
    //小分类
    changeDate(index) {
      // console.log("changeDate-index:", index);
      this.datecheck = index;
      this.getDatas();
    },
    addressData(item) {
      if (item == null || item == "") {
        return "--";
      } else {
        var data = JSON.parse(item);
        return data.poiname;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/css/unity.scss");

.unity-body-div {
  // padding: 0px 3vw;
  // padding-top: 35px;
  // padding-bottom: 35px;

  /*background: rgba(5, 15, 26, 0.5) !important;*/
  // padding: 0;
  padding: 0px 32px 8px 32px;
}

.unity-body-center {
  // margin-top: 12px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  // height: 230px;
  // height: 330px;
  // height: 300px;
  height: 460px;
  align-items: center;
  justify-content: center;
  // padding: 11px 6.8vw;
  // border: 1px solid rgba(255, 255, 255, 0.6);  //这次
  overflow: hidden;
  // height: 100%;

  .chart {
    width: 100%;
    height: 100%;
    z-index: 99999;
  }
}

.unity-body-center_tablee {
  margin-top: 12px;
  //display: flex;
  width: 100%;
  box-sizing: border-box;
  // height: 230px;
  align-items: center;
  //justify-content: center;
  // padding: 11px 6.8vw;
  border: 1px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.unity-body-center-right {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.unity-body-center-left-top {
  // margin: 0 auto;
  display: flex;
  // flex-direction: column;
  align-items: center;

  font-size: 18px;
  font-family: siyuan_bold;
  font-weight: 500;
  color: #ffffff;
}

table {
  width: 100%;
  height: 100%;
  // border: 1px solid #000;
  // border: 1px dashed #000;
  border-collapse: collapse;
  box-sizing: border-box;
}

table tr:last-child td {
  //border-bottom: 0px;
  //box-sizing: border-box;
}

td,
.device-monitor-item {
  // padding: 8px 8px 8px 10vw;
  padding: 8px 8px 8px 33px;
  color: #ffffff;
  font-size: 14px;
}

td {
  align-items: center;
  // text-align: center;
  width: 50%;
  // min-height: 36.5px;
  // border: 1px solid red;
  box-sizing: border-box;
}

.td1 {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
}

.td2 {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
}

.tb_td3 {
  color: #ffffff;
  font-size: 14px;
  padding: 8px 8px 8px 33px;
}

.color-gradient-blue_device {
  // /*主色调 */
  // background: #3083ff;
  // /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #3083ff), color-stop(1, #2dc1ff));
  // /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
  // /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
  // /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -o-linear-gradient(left, #3083ff, #2dc1ff);
  // /*filter:滤镜名（参数)*/
  // filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
  // -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
  background: linear-gradient(-77deg, #2dc1ff 0%, #3083ff 99%);
}

.state1 {
  color: #41d12dff;
  border: 1px solid #41d12dff;
}

.state2 {
  color: #fcc70e;
  border: 1px solid #fcc70e;
}

.state3 {
  color: #ff4a53;
  border: 1px solid #ff4a53;
}

.unity-body-center-body-btn {
  display: flex;

  .unity-body-center-right-btn {
    //width: 290px;
    //height: 400px;
    //padding: 10px;
    width: 310px;
    height: 420px;
    overflow: hidden;
    position: relative;
    // left: 15px;
    left: 20px;
    top: 51px;
    border: 1px solid rgba(255, 255, 255, 0.6);
  }

  .unity-body-center-left-btn {
    width: 100%;
    // width: 567px;
    // width: 575px;
    height: 100%;
    position: relative;
    // overflow: hidden;
  }

  .unity-body-center-left-btn-center {
    // position: absolute;
    // left: 0;
    // top: 0;
    // bottom: 0;
    // right: -5px;
    // padding-right: 5px;
    .unity-body-center-left-tab {
      height: 40px;
    }

    .unity-body-center-left-gun {
      position: absolute;
      left: 0;
      top: 100px;
      bottom: 0;
      right: -5px;
      padding-right: 5px;
      overflow-y: scroll;
      //tab距离
      margin-top: 12px;
    }

    .unity-body-center-left-gun::-webkit-scrollbar {
      width: 6px;
      border-radius: 3px;
      background-color: rgba(0, 0, 0, 0);
    }

    .unity-body-center-left-gun::-webkit-scrollbar-thumb {
      border-radius: 3px;
      // width: 0px;
      // height: 0px;
      /*主色调 */
      background: #3083ff;
      /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -webkit-gradient(
        linear,
        left top,
        right bottom,
        color-stop(0, #3083ff),
        color-stop(1, #2dc1ff)
      );
      /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
      /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
      /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -o-linear-gradient(left, #3083ff, #2dc1ff);
      /*filter:滤镜名（参数)*/
      filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
    }
  }

  // .unity-body-center-left-btn-center::-webkit-scrollbar {
  //   width: 6px;
  //   border-radius: 3px;
  //   background-color: rgba(0, 0, 0, 0);
  // }

  // .unity-body-center-left-btn-center::-webkit-scrollbar-thumb {
  //   border-radius: 3px;
  //   // width: 0px;
  //   // height: 0px;
  //   /*主色调 */
  //   background: #3083ff;
  //   /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -webkit-gradient(
  //     linear,
  //     left top,
  //     right bottom,
  //     color-stop(0, #3083ff),
  //     color-stop(1, #2dc1ff)
  //   );
  //   /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
  //   /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
  //   /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -o-linear-gradient(left, #3083ff, #2dc1ff);
  //   /*filter:滤镜名（参数)*/
  //   filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
  //   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
  // }
}

.device-monitor-list {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
}

/deep/ .device-monitor-list .el-col:nth-child(2n) .device-monitor-item {
  border-left: 1px dashed rgba(255, 255, 255, 0);
}

/deep/ .device-monitor-list .el-col:nth-child(2n-1) .device-monitor-item {
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
  padding-right: calc(8px + 2.4vw);
}

.device-monitor-item {
  // border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  // border-right: 1px dashed rgba(255, 255, 255, 0.6);
}

.device-monitor-item.no-border-bottom {
  border-bottom: unset;
}
</style>

<style lang="scss">
.damSeepage {
  width: 100%;
  height: 100%;
  color: #fff;

  // element标签页样式修改
  .el-tabs__header {
    margin: 0 !important;
  }

  .el-tabs__item {
    color: #fff !important;
    font-size: 18px !important;
  }

  .el-tabs__active-bar {
    height: 3px !important;
  }

  .el-tabs__item.is-active {
    color: #fff !important;
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    font-size: 20px !important;
    color: #fff !important;
    top: -2px !important;
  }

  .el-tabs__nav-wrap.is-scrollable {
    padding: 0 30px !important;
  }

  .el-tabs__active-bar {
    height: 4px !important;
    background: linear-gradient(-77deg, #2dc1ff 0%, #3083ff 99%) !important;
  }

  .el-tabs__nav-wrap::after {
    background: none !important;
  }

  .unity-body-center .chart {
    z-index: 1;
  }

  // 历史数据
  canvas {
    border: 1px solid #000;
  }
  .el-dialog__body {
    background-color: #082752;
  }
  .el-dialog__header {
    padding: 10px 20px;
    background-color: #18c3fa;
  }
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  .el-dialog__headerbtn {
    top: 15px;
  }

  .el-dialog .el-dialog__body {
    height: 56vh !important;
  }
}

.change_date {
  position: absolute;
  right: 0px;
  top: 9px;
  display: flex;
  z-index: 9999999999;
}

.choosedate {
  padding: 2px 5px;
  width: 70px;
  height: 24px;
  line-height: 24px;
  margin-right: 9px;
  border-radius: 2px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(37deg, #2dc1ff 0%, #3083ff 99%);
  border: 1px solid #0083fd;
}

.change_date_item {
  padding: 2px 5px;
  width: 70px;
  height: 24px;
  line-height: 24px;
  margin-right: 9px;
  border: 1px solid #0083fd;
  border-radius: 2px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guzhang {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.t_return {
  position: absolute;
  width: 45px;
  height: 32px;
  top: 0px;
  left: 0px;
  border-radius: 0px 10px 0px 10px;
}
</style>
